<template>
	<view>
		<view class="user-info-backgrounp">
			<view class="chat-box">
				<image style="width:48upx;height:40upx;margin-top:26upx;margin-right: 20upx;" src="../../image/icon/main/chat.png"></image>
			</view>
			<view class="user-info-content">
				<view class="userInfo-box">
					<view class="userInfo-image-box">
						<image style="width: 108upx;height: 108upx;border-radius: 100upx;border:7upx solid #FFFFFF;" src="https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKaem7ZoTjRIDzNWZTE3hxvr6cnOiaDwR4ABf11DbpiaPMibC3LMp6n3NuPSmHzagaZiazicUn1UdongLA/132"></image>
					</view>
					<view class="userInfo-text">
						<view class="userInfo-name">
							<text>Anne</text>
							<image style="margin-left: 25upx; width: 28upx;height: 28upx;background-color: #FFFFFF;"></image>
						</view>
						<text style="font-size: 24upx;">个人资料</text>
					</view>
				</view>
			</view>
			<view style="display: flex;justify-content: center;align-items: center;">
				<view class="MyInfo-content">
					<view class="MyInfo-tab">
						<image style="width: 24upx;height: 24upx;background-color: #FFFFFF;"></image>
						<text>我的房源</text>
					</view>
					<view class="MyInfo-tab">
						<image style="width: 24upx;height: 24upx;background-color: #FFFFFF;"></image>
						<text>我的预约</text>
					</view>
					<view class="MyInfo-tab">
						<image style="width: 24upx;height: 24upx;background-color: #FFFFFF;"></image>
						<text>我的库存</text>
					</view>
				</view>
			</view>
		</view>
		<view class="click-absolute">
			<view class="click-content">
				<view class="click-tab">
					<view class="">
						<image style="width: 44upx;height: 52upx;background-color: #FFFFFF;"></image>
					</view>
					<text>我的合同</text>
				</view>
				<view class="click-tab">
					<view class="">
						<image style="width: 44upx;height: 52upx;background-color: #FFFFFF;"></image>
					</view>
					<text>收藏详情</text>
				</view>
				<view class="click-tab">
					<view class="">
						<image style="width: 44upx;height: 52upx;background-color: #FFFFFF;"></image>
					</view>
					<text>我的订单</text>
				</view>
				<view class="click-tab">
					<view class="">
						<image style="width: 44upx;height: 52upx;background-color: #FFFFFF;"></image>
					</view>
					<text>我的评价</text>
				</view>
			</view>
		</view>
		<view class="My-text">
			<text style="font-size: 32upx;color: #555555;">我的家</text>
			<view style="border-right: 2px solid #7F7F7F;height: 28upx;width: 10upx;margin-right: 10upx;"></view>
			<text style="font-size: 22upx;color: #7F7F7F;">期待您选择创团</text>
		</view>
		<view class="My-home-content">
			<view class="My-home-tab">
				<image src=""></image>
				<text>安全专线</text>
			</view>
			<view class="My-home-tab">
				<image src=""></image>
				<text>我的管家</text>
			</view>
			<view class="My-home-tab">
				<image src=""></image>
				<text>保障权益</text>
			</view>
			<view class="My-home-tab">
				<image src=""></image>
				<text>入住指南</text>
			</view>
		</view>
		<view class="swiper-content">
			<swiper @change="change">
				<swiper-item>
					<image src=""></image>
				</swiper-item>
				<swiper-item>
					<image src=""></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="indicator-content">
			<view class="dots" v-for="item in list" :key="item.id">
				<block></block>
			</view>
		</view>
		<view class="help-text">
			<text style="font-size: 32upx;color: #555555;">帮助中心</text>
			<view style="border-right: 2px solid #7F7F7F;height: 28upx;width: 10upx;margin-right: 10upx;"></view>
			<text style="font-size: 22upx;color: #7F7F7F;">给您最好的服务</text>
		</view>
		<view class="My-home-content">
			<view class="My-home-tab">
				<image></image>
				<text>资讯客服</text>
			</view>
			<view class="My-home-tab">
				<image src=""></image>
				<text>加入我们</text>
			</view>
			<view class="My-home-tab">
				<image src=""></image>
				<text>投诉建议</text>
			</view>
			<view class="My-home-tab">
				<image src=""></image>
				<text>关于我们</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			return{
				list:[
					{id:1,src:'https://'},
					{id:2,src:'https://'}
					],
					 indicatorDots: true,
			}
		},
		onLoad() {

		},
		methods: {
			change(e) {
				this.indicatorDots = !this.indicatorDots
				console.log(e)
			},
		}
	}
</script>

<style>
	swiper{
		width: 90%;height: 146upx;display: flex;justify-content: center;align-items: center;
	}
	swiper image {
		width:710upx;height: 146upx; background-color: #cca33a;
	}
	.user-info-backgrounp {
		width: 750upx;
		height: 396upx;
		background-color: #666EE8;
	}

	.chat-box {
		display: flex;
		justify-content: flex-end;
	}

	.user-info-content {
		margin-left: 93upx;
	}

	.user-info-content .userInfo-box {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.userInfo-box .userInfo-text {
		color: #FFFFFF;
		font-family: PingFang SC;
		padding-left: 40upx;
	}

	.user-info-content .userInfo-box .userInfo-text .userInfo-name {
		font-size: 40upx;
		font-weight: bold;
		margin-right: 40upx;
	}

	.MyInfo-content {
		display: flex;
		justify-content: space-around;
		margin-top: 40upx;
		width: 582upx;
		height: 24upx;
	}

	.MyInfo-content .MyInfo-tab {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.MyInfo-content .MyInfo-tab text {
		color: #555555;
		font-size: 24upx;
		margin-left: 10upx;
	}
	.click-absolute{
		display: flex;justify-content: center;align-items: center;font-family: Arial, Helvetica, sans-serif;
	}
	.click-absolute .click-content {
		background-color: #F2F2F2;
		width: 670upx;
		height: 188upx;
		position: absolute;
		top: 300upx;
		display: flex;
		justify-content: space-around;
		box-shadow: 5upx 5upx 5upx #E4E4E4,6upx 6upx 5upx #e8e8e8,6upx 8upx 5upx #ececec,6upx 15upx 5upx #f1f1f1;
	}

	.click-content .click-tab {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.click-content .click-tab text {
		font-size: 24upx;color: #797979;
	}
	.My-text{
		margin-left: 20upx;
		margin-top: 140upx;
		font-family: Arial, Helvetica, sans-serif;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.My-home-content{
		display: flex;
		justify-content: space-around;
		font-family: Arial, Helvetica, sans-serif;font-size: 24upx;
		margin-top: 60upx;
	}
	.My-home-content .My-home-tab{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.My-home-content .My-home-tab text{
		margin-top: 15upx;
	}
	.My-home-content .My-home-tab image{
		width: 44upx;height: 44upx;background-color: #e4e4e4;
	}
	.swiper-content{
		display: flex;justify-content: center;align-items: center;height: 146upx;
		margin-top: 50upx;
	}
	.help-text{
		margin-left: 20upx;
		margin-top: 40upx;
		font-family: Arial, Helvetica, sans-serif;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.indicator-content{
		margin-top: 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.indicator-content .dots{
	  margin: 0 10rpx;
	  width: 15rpx;
	  height: 15rpx;
	  border-radius: 50%;
	  background-color: #999;
	  transition: all 0.6s;
	  opacity: 0.5;
	}
	.indicator-content .dots .active{
		background-color: #549688;
		opacity: 1;
	}
	
</style>
